
<template> 
  <div class="tenant-container">
      <!-- 用户名称搜索  状态搜索 -->
      <ContentWrap>
       <el-form 
       class="-mb-15px"
      :model="queryParams"
       :inline="true"
      label-width="68px"
      >
        <el-form-item  label="用户名称" prop="username">
          <el-input v-model="queryParams.username" placeholder="请输入用户名称" class="!w-240px"/>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" clearable placeholder="请选择状态" class="!w-240px">
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="primary" @click="handleView('add')">新增租户</el-button>
        </el-form-item>
       </el-form>
      </ContentWrap>
      <!-- 记录列表 -->
       <ContentWrap>
        <el-table :data="tableData"  :stripe="true" :show-overflow-tooltip="true" :loading="loading">
          <el-table-column label="租户编号" prop="id" align="center" />
          <el-table-column label="租户名" prop="name" align="center" />
          <el-table-column label="舌诊额度" prop="tongueDiagnosisLimit" align="center" />
          <el-table-column label="使用次数" prop="useCount" align="center" />
          <el-table-column label="状态" prop="status" align="center" >
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="过期时间" prop="expiredTime" align="center" >
            <template #default="scope">
              <span>{{ scope.row.expiredTime ? formatDate(scope.row.expiredTime,'YYYY-MM-DD HH:mm:ss') : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" >
            <template #default="scope">
              <el-button type="primary" link @click="handleView('edit',scope.row)">编辑</el-button>
              <el-button type="danger" link @click="handleDelete(scope.row)">禁用</el-button>
              <el-button type="primary" link @click="handleRecord(scope.row)">查看记录</el-button>
            </template>
          </el-table-column>
        </el-table>
        <Pagination v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" />
       </ContentWrap>
       <AddTenant v-if="addTenantVisible" :edit-type="editType" :edit-data="editData" @ok="handleAddOk" @cancel="handleAddCancel" />
  </div>
</template>

<script setup lang="ts">
import { ref,reactive,toRefs } from 'vue'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE } from '@/utils/dict'
import AddTenant from './addTenant.vue'


const state = reactive({
  queryParams: {
    username: '',
    status: '',
    pageNum: 1,
    pageSize: 10
  },
  loading: false,
  tableData: [],
  total: 0,
  addTenantVisible: false,
  editType: 'add',
  editData: {}
})
const { queryParams, loading, tableData, total,addTenantVisible,editType,editData } = toRefs(state)

const handleAddOk = (data: any) => {  
  console.log(data)
  addTenantVisible.value = false
}
const handleAddCancel = () => {
  addTenantVisible.value = false
}

const handleDelete = (row: any) => {
  ElMessageBox.confirm('是否禁用当前租户？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    console.log(row)
  })
  console.log(row)
}
const handleQuery = () => {
  console.log(queryParams.value)
}
const handleReset = () => {
  queryParams.value.username = ''
  queryParams.value.status = ''
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 10
  handleQuery()
}
const handleView = (type?: string, row?: any) => {
  console.log(type, row)
  if (type === 'add') {
    editType.value = 'add'
    addTenantVisible.value = true
  } else if (type === 'edit') {
    editType.value = 'edit'
    editData.value = row
    addTenantVisible.value = true
  }
}


const handleRecord = (row: any) => {  
  console.log(row)
}

</script>

<style scoped lang="scss">

</style>